<!--
 * @Author: 李环玉 834654733@qq.com
 * @Date: 2023-10-16 08:28:57
 * @LastEditors: 李环玉 834654733@qq.com
 * @LastEditTime: 2023-12-17 05:57:50
 * @FilePath: \nuxt-app\components\UserCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="usercard" v-loading="loading">
    <div class="usercard-user" ref="usercardRef">
      <img class="usercard-user_bg" src="../assets/images/1000141.jpg" alt="">
      <img class="usercard-user_avatar" :src="userInfo.avatar" alt="头像资源">
      <h1 class="kaiti">{{ userInfo.userName }}</h1>
      <p>{{ userInfo.sign }}</p>
      <div class="usercard-user_num">
        <p>
          <span>{{ userInfo.articleNum }}</span>
          <span>文章数</span>
        </p>
        <p>
          <span>{{ userInfo.tageNum }}</span>
          <span>标签数</span>
        </p>
        <p>
          <span>{{ userInfo.genreNum }}</span>
          <span>分类数</span>
        </p>
      </div>
      <div class="usercard-user_tag">
        <div
          class="usercard-user_tag--button" 
          v-for="(item,index) in userInfo.blog_tags"
          :key="index">
          <n-button
            :color="item.type"
            size="tiny"
            dashed>
            <template #icon>
              <span :class="'iconfont' + ' ' + item.icon"></span>
            </template>
            {{ item.name }}
          </n-button>
        </div>
      </div>
      
    </div>
    
    
  </div>
</template>

<script setup lang="ts">
import { getBloggerInfo } from '../service/api/Blogger'
interface userInfoType {
  userName:string,
  sign:string,
  articleNum:string,
  genreNum:string,
  blog_tags:Array<any>
}
let loading = ref(false)
let userInfo:any = ref({})
const getInfo = async () => {
  await nextTick()
  loading.value = true
  try {
    const res:any = await getBloggerInfo({})
    const data = res.data._value.data
    userInfo.value = data[0]
    loading.value = false
  } catch(err) {
    console.log(err)
  }
}
onMounted(()=>{
  getInfo()
})
</script>

<style scoped lang="scss">
.usercard{
  width: 250px;
  border-radius: 6px;
  height: auto;
  margin-bottom: 20px;
  &-user{
    background-color: rgba(255,255,255,.9);
    background-size: 100%;
    border-radius: 6px;
    position: relative;
    height: auto;
    padding-bottom: 40px;
    width: 250px;
    z-index: 0;
    transition: all 1s;
    &_avatar{
      width: 80px;
      height: 80px;
      border-radius: 40px;
      position: absolute;
      top: 80px;
      left: 34%;
    }
    &_bg{
      width: 100%;
      border-radius: 6px 6px 0 0;
      opacity: 0.9;
    }
    h1{
      font-size: 20px;
      margin-top: 40px;
      margin-bottom: 15px;
      text-align: center;
    }
    p{
      font-size: 14px;
      text-align: center;
    }
    &_num{
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      p{
        display: flex;
        flex-direction: column;
        span{
          margin-top: 15px;
        }
      }
    }
    &_tag{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
      &--button{
        margin-right: 10px;
        margin-bottom: 10px;
        .n-button{
          padding: 4px;
        }
      }
    }
  }
  
}

</style>